import { Form, Input, Row } from 'antd';
import React, { Component } from 'react';
import { isEmpty, isFunction } from 'lodash';
import { createForm } from '/common/components/HocCRUD';
import ModalComp from '/common/components/ModalItem/ModalComp';

@Form.create()
@createForm()
class DetailForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  getAjaxData() {
    const { compData = {} } = this.props;
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll(async (errors, fieldsValue) => {
        //console.log('errors:',errors);
        if (isEmpty(errors)) {
          const values = {
            ...fieldsValue,
          };
          compData.id > 0 && (values.id = compData.id);
          resolve(values);
        } else {
          reject(errors);
        }
      });
    });
  }

  getFields(formFields) {
    const formProps = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };
    const colSpan = 0;
    return this.props.getFields(formFields, colSpan, formProps);
  }

  render() {
    const { compData } = this.props;
    const formFields = [
      {
        label: '文件名称',
        fieldName: 'newName',
        options: {
          initialValue: compData ? compData.name : '',
          rules: [{
            required: true,
            message: '请输入名称',
          }],
        },
        comp: <Input/>,
      },
    ];
    return (
      <>
        <Form layout="horizontal">
          <Row gutter={16}>
            {this.getFields(formFields)}
          </Row>
        </Form>
      </>
    );
  }
}

class FileDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.itemRef = React.createRef();
  }

  componentDidMount() {
  }

  async handleOk() {
    const {
      saveDetail,
    } = this.props;
    const itemRef = this.itemRef.current;

    if (itemRef && isFunction(itemRef.getAjaxData)) {
      try {
        const values = await itemRef.getAjaxData();
        //  console.log('values:',values);
        saveDetail(values);
      } catch (e) {
        // console.log(e);
      }

    } else {
      console.error('EmployeeClassifyDetail Have not getAjaxData function');
    }
  };

  handleCancel(e) {
    this.props.hideDetail();
  }

  render() {
    const { compData } = this.props;
    const isEdit = (compData && compData.id > 0);
    return (
      <ModalComp
        width={520}
        key={Math.round()}
        title={`重命名`}
        visible={this.props.isShowDetail}
        onOk={this.handleOk.bind(this)}
        destroyOnClose={true}
        onCancel={this.handleCancel.bind(this)}
      >
        <DetailForm compData={compData}
                    key={`file_form_${Math.round()}`}
                    fromLineLeg={5}
                    wrappedComponentRef={this.itemRef}/>
      </ModalComp>);
  }
}

FileDetail.propTypes = {};

export default FileDetail;



